import styles from './Header.module.scss';
import logo from './../../images/logo.svg';
import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
import { ROUTES } from '../../utils/conts';
import { useDispatch, useSelector } from 'react-redux';
import { deleteCookie } from '../../utils';
import { LogOut } from '../../features/auth/auth';
// import { addAuth, toggleModal } from '../../featers/auth/auth'

const HeaderAuth = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  

  const handleClickLogOut = () => {
    deleteCookie('id');
    navigate(ROUTES.HOME);
    dispatch(LogOut(false))
  };
  return (
    <header className={styles.header}>
      <Link to={ROUTES.MAIN__PAGE__ACCOUNT}>
        <div className={styles.logo}>
          <p>Weather-history</p>
        </div>
      </Link>
      <div className={styles.menu}>
        <NavLink
          to={ROUTES.MAIN__PAGE__ACCOUNT}
          className={({ isActive }) => (isActive ? `${styles.link} ${styles.active}` : styles.link)}
        >
          Аккаунты
        </NavLink>
        <NavLink
          to={ROUTES.TYPES__REGION}
          className={({ isActive }) => (isActive ? `${styles.link} ${styles.active}` : styles.link)}
        >
          Тип региона
        </NavLink>
        <NavLink
          to={ROUTES.REGION}
          className={({ isActive }) => (isActive ? `${styles.link} ${styles.active}` : styles.link)}
        >
          Регион
        </NavLink>
        <NavLink
          to={ROUTES.FORECAST}
          className={({ isActive }) => (isActive ? `${styles.link} ${styles.active}` : styles.link)}
        >
          Прогноз
        </NavLink>
      </div>

      <div className={styles.wrapper}>
        <p className={styles.logOut} onClick={handleClickLogOut}>
          Выйти
        </p>
      </div>
    </header>
  );
};

export default HeaderAuth;
